<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth">
            <div v-show="modalType === 'edit' || modalType === 'add'">
                <Form ref="formItem" :rules="ruleValidate" label-position="right" :model="formItem" :label-width="130">
                    <!--<FormItem label="名称：" prop="name">
                        <Input type="text" maxlength="50" v-model="formItem.name" placeholder="请输入名称" clearable></Input>
                    </FormItem>
                    <FormItem label="场所地址：" prop="place_address">
                        <Input type="textarea" :autosize="{minRows: 2, maxRows: 5}" maxlength="255"
                               v-model="formItem.place_address" placeholder="请输入场所地址" clearable></Input>
                    </FormItem>-->
                </Form>
            </div>
            <div v-show="modalType === 'info'">
                <Form label-position="right" :model="formItem" :label-width="150">
                    <FormItem label="操作前数据：">
                        <div class="code-area" v-html="formItem.before_data">{{formItem.before_data}}</div>
                    </FormItem>
                    <FormItem label="操作后数据：">
                        <div class="code-area" v-html="formItem.after_data">{{formItem.after_data}}</div>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'edit' || modalType === 'add'">
                    <Button type="text" @click="cancelOption">取消</Button>
                    <Button type="success" @click="saveOption" :loading="btnLoading">保存</Button>
                </template>
                <template v-if="modalType === 'info'">
                    <Button type="text" @click="cancelOption">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
// updatePlaceInfo
} from '@/api/settings'
// import { formatDate } from '@/components/dateFormat'
export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      ruleValidate: {
        name: [
          { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
        ]
      },
      modalShow: false,
      btnLoading: false,
      formItem: {},
      categoryObj: {}
    }
  },
  methods: {
    modelAction () {
      this.modalShow = !this.modalShow
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      let param = {}
      if (this.modalType === 'add') {
        param = this.formItem
        this.$delete(param, 'id')
      } else if (this.modalType === 'edit') {
        param = this.formItem
      }
      // 临时数据处理
      param.type = 'tour'
      // 数据校验
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          // this.formItem.publish_time = formatDate(this.formItem.publish_time, 'yyyy-MM-dd')
          // console.log('提交表单', this.formItem)
          if (this.modalType === 'add') {
            this.addDataAction(param)
          } else if (this.modalType === 'edit') {
            this.updateDataAction(param)
          }
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    updateDataAction (param) {
      // this.btnLoading = true
      // updatePlaceInfo(param).then(ret => {
      //   let data = ret.data
      //   if (data.errcode === 0) {
      //     this.btnLoading = false
      //     this.success()
      //     this.$emit('saveOption')
      //   } else {
      //     this.btnLoading = false
      //     this.error(data)
      //   }
      // })
    },
    addDataAction (val) {
      // this.btnLoading = true
      // let arr = []
      // const obj = this.$common.xeUtils.clone(val)
      // arr.push(obj)
      // let param = { type: 'place', dataList: arr }
      // saveExcelData(param).then(ret => {
      //   let data = ret.data
      //   if (data.errcode === 0) {
      //     this.btnLoading = false
      //     this.success()
      //     this.$emit('saveOption')
      //   } else {
      //     this.btnLoading = false
      //     this.error(data)
      //   }
      // })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {},
  watch: {
    dataObj (val) {
      this.formItem = val
    }
  },
  computed: {}
}
</script>

<style scoped>
    .code-area {
        height: 500px;
        padding: 20px;
        border-radius: 5px;
        overflow: scroll;
        background-color: #f0f0f0;
    }
</style>
